<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button icon="search" type="primary" @click="searchQuery">查询</a-button>
      <a-button icon="reload" type="primary" @click="searchReset">重置</a-button>
      <a-button icon="plus" type="primary" @click="handleAdd">新增</a-button>
    </div>

    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      class="j-table-force-nowrap"
      :scroll="{ x: true }"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
      :customRow="clickThenSelect"
      @change="handleTableChange"
    >
    </a-table>

    <SystemSettingModal ref="modalForm" />
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SystemSettingModal from './modules/SystemSettingModal.vue'
import { getAction } from '@api/manage'

export default {
  name: 'PermissionListAsync',
  mixins: [JeecgListMixin],
  components: {
    SystemSettingModal
  },
  data() {
    return {
      description: '这是菜单管理页面',
      disableMixinCreated: true,
      // 表头
      columns: [
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '值',
          align: 'center',
          dataIndex: 'setting'
        }
      ],
      loading: false,
      // 展开的行，受控属性
      expandedRowKeys: [],
      url: {
        list: '/system/hfSystemSetting/list',
        delete: '/sys/permission/delete',
        deleteBatch: '/sys/permission/deleteBatch'
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.id.split(','), [record])
          }
        }
      }
    },
    loadData(arg) {
      this.loading = true
      getAction(this.url.list, {}, {})
        .then(res => {
          if (res.success) {
            this.dataSource = res.result.records || res.result
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
